<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/3
  Time: 18:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/22library2/js/jquery.js"></script>
    <style>
        table{
            table-layout: fixed;
        }

        .red{
            color:red
        }
        .headImg{
            width: 50px;
            height: 50px;
        }
        .bookCover{
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    欢迎 ${loginUser.username} <img src="${loginUser.headImg}" class="headImg">
    <div class="searchBox">
        <form>
            <input type="text" name="bookName" id="bookName" placeholder="书名">
            <input type="text" name="bookWriter" id="bookWriter" placeholder="作者">
            <input type="text" name="bookType" id="bookType" placeholder="类型">
            出版时间范围<input type="Date" name="beginDate" id="beginDate">
            <input type="Date" name="endDate" id="endDate">
            <input type="button" value="查找" id="searchBtn">
        </form>
        <a href="/22library2/bookAdd">添加书本</a>
    </div>

    <div>
        <table border="1" width="800px">
            <thead>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>类型</th>
                <th>价格</th>
                <th>出版时间</th>
                <th>封面</th>
                <th>操作</th>
            </thead>
            <tbody>

            </tbody>
        </table>
        <select id="pageSize">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="15">15</option>
            <option value="20">20</option>
        </select>
    </div>

    <div id="pageBar">

    </div>
</body>
<script>
    let currentPage = 1;

    $("#searchBtn").click(function(){
        searchBook(1);
    })

    $("#pageSize").change(function(){
        searchBook(1);
    })

    searchBook(1);
    function searchBook(pageNum){
        $("tbody").empty();
        let bookName = $("#bookName").val();
        let bookWriter = $("#bookWriter").val();
        let bookType = $("#bookType").val();
        let beginDate = $("#beginDate").val();
        let endDate = $("#endDate").val();
        let pageSize = $("#pageSize").val();
        $.ajax({
            url:"/22library2/book/getBooks",
            type:"get",
            data:{
                "bookName":bookName,
                "bookWriter":bookWriter,
                "bookType":bookType,
                "beginDate":beginDate,
                "endDate":endDate,
                "pageNum":pageNum,
                "pageSize":pageSize
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                let books = data.list;
                for(let i = 0;i<books.length;i++){
                    let book = books[i];
                    let tr = $("<tr></tr>");
                    tr.append("<td>"+book.bookId+"</td>");
                    tr.append("<td>"+book.bookName+"</td>");
                    tr.append("<td>"+book.bookWriter+"</td>");
                    tr.append("<td>"+book.bookType+"</td>");
                    tr.append("<td>"+book.bookPrice+"</td>");
                    tr.append("<td>"+book.pubDate+"</td>");
                    tr.append(`<td><img src="${"${book.bookCover}"}" class="bookCover"></td>`)
                    tr.append(`<td><a href="#" onclick="deleteBook(${"${book.bookId}"})">删除</a>
                                    <a href="/22library2/book/update?bookId=${"${book.bookId}"}">修改</a>
                                    </td>`)
                    $("tbody").append(tr);
                }
                makePageBar(data);
            }
        })
    }
    //jsp中要使用 模板字符串
    function makePageBar(data){
        let pageBar = $("#pageBar");
        pageBar.empty();
        if(data.hasPreviousPage){
            let lastPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum-1}"})">上一页</a>`);
            pageBar.append(lastPage);
        }

        for(let i = 0;i<data.navigatepageNums.length;i++){
            let a = $(`<a href="#" onclick="searchBook(${"${data.navigatepageNums[i]}"})">${"${data.navigatepageNums[i]}"}</a>`);
            if(data.pageNum == data.navigatepageNums[i]){
                a.addClass("red");
                currentPage = data.pageNum;
            }
            pageBar.append(a);
        }
        if(data.hasNextPage){
            let nextPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum+1}"})">下一页</a>`);
            pageBar.append(nextPage);
        }
    }

    function deleteBook(bookId){
       let confirm = window.confirm("请确认是否要删除，无法撤销");
       if(!confirm){
           return false;
       }
       $.ajax({
           url:"/22library2/book/deleteBook",
           type:"POST",
           data:{
              "bookId":bookId
           },
           success:function(data){
               if(data == 'success'){
                   alert("删除成功");
                   searchBook(currentPage);
               }else{
                   alert("删除失败");
               }
           }
       })
    }
</script>
</html>
